<template>
  <div class="proStatistics">
    <!-- <van-empty description="暂无推广" /> -->
    <!-- <van-sticky offset-top="4rem" class="my-sticky"> -->
    <!-- <div class="abstract">
        <div><div >每日</div></div>
        <div><div >每月</div></div>
        <div><div>每年</div></div>
    </div> -->

    
    <van-calendar
      v-model:show="show"
      type="range"
      @confirm="onConfirm"
      :min-date="minDate"
      :max-date="maxDate"
    />
    <van-tabs
      class="my-sticky"
      v-model:active="active"
      title-inactive-color="#000"
      title-active-color="#fff"
      background="#f2f2f2"
      color="#0f8a40"
      :sticky="true"
      offset-top="4rem + 44px"
      swipeable
      key="4"
      type="card"
    >
      <van-tab
        v-for="(value, index) in navbar"
        :key="index"
        :name="value.code"
        :title="value.name"
        style="border-radius:10px"
      >
      <!-- <div @click="show = true" class="date">其他时间 </div> -->
        
        <div >
          <van-list
            v-model:loading="loading"
            :finished="finished"
            @load="onLoad(false)"
            :key="index"
          >
          <div v-if="!list.length && finished&&!loading">
          <!-- <van-empty
            class="custom-image"
            image="http://www.higuang365.com/public/images/poster/zanwu.png"
          /> -->
          <img class="custom-image" src="http://www.higuang365.com/public/images/poster/zanwu.png"/>
            <!-- image="https://img.yzcdn.cn/vant/custom-empty-image.png" -->
        </div>
            <div v-else class="foods">
              <a class="food" v-for="(value, index) in list" :key="index" :href="'http://www.higuang365.com/wap/#/product?id='+value.product_id+'&parents_id='+$store.state.userInfo.F_Question">
              <!-- <router-link
                class="food"
                v-for="(value, index) in list"
                :key="index"
                :to="
                  '/product/' +
                  value.product_id +
                  '/' +
                  $store.state.userInfo.F_Question
                "
              > -->
                <div class="img">
                  <img :src="'http://higuang365.com/' + value.pic_url" />
                </div>
                <div class="info">
                  <div class="name">{{ value.ProductName }}</div>
                  <div class="foodinfos">
                    <div class="foodinfo">
                      <div class="font">付款金额</div>
                      <div>￥{{ value.TotalPrice }}</div>
                    </div>
                    <div class="foodinfo">
                      <div class="font">我的奖励</div>
                      <div>￥{{ value.CentsPrice }}</div>
                    </div>
                    <div class="foodinfo">
                      <div class="font">购买数量</div>
                      <div>{{ value.Nums }}</div>
                    </div>
                  </div>
                  <!-- <div class="createtime">{{ value.createtime }} </div> -->
                </div>
              <!-- </router-link> -->
              </a>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <van-calendar
      v-model:show="show"
      type="range"
      @confirm="onConfirm"
      :min-date="minDate"
      :max-date="maxDate"
    />
    <!-- </van-sticky> -->
  </div>
</template>
<script>
import { reactive, toRefs,watch } from "vue";
import { getCentsInfolist } from "@/api/profit";
import { useStore } from "vuex";
export default {
  setup() {
    const data = reactive({
      list: [],
      loading: false,
      finished: false,
      Refresh: false,
      navbar: [
        { name: "每日", url: "personalExtension", code: 1 },
        { name: "每月", url: "monthlyStatistics", code: 2 },
        { name: "每年", url: "monthlySettlement", code: 3 },
      ],
      show: false,
      active: 1,
      status:1,
      start:'',
      end:'',
      pageNum: 1,
      pageSize: 20,
    });
    const store = useStore();
     const toUpdate=(update)=>{
       if (update) {
        data.pageNum = 1;
        data.finished = false;
        data.list = [];
        console.log(111)
      }
     }
    const onLoad = async (update) => {
      
      console.log(222)
      const date = new Date();
      switch (data.status) {
        case 1:
          data.start = `${date.getFullYear()}-${
            date.getMonth() + 1
          }-${date.getDate()}`;
          data.end = `${date.getFullYear()}-${date.getMonth() + 1}-${
            date.getDate() + 1
          }`;
          break;
        case 2:
          data.start = `${date.getFullYear()}-${
            date.getMonth() + 1
          }-01`;
          data.end = `${date.getFullYear()}-${
            date.getMonth() + 2
          }-01`;
          break;
        case 3:
          data.start = `${date.getFullYear()}-01-01`;
          data.end = `${date.getFullYear() + 1}-01-01`;
          break;
        default:
          data.start = `${data.start }`;
          data.end = `${data.end }`;
      }
      let fromdata = {
        member_id: store.state.userInfo.F_UserId, //当前会员ID
        member_refer_id: store.state.userInfo.F_Question, //店主推广ID
        B_member_ok_time: store.state.userInfo.F_AllowStartTime, //店主资格审批完成时间
        Stime: `${data.start } 00:00:00`, //开始时间
        Etime: `${data.end } 00:00:00`, //结束时间
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      };
      
      const res = await getCentsInfolist(fromdata);
      data.loading = false;
      if (!res[0] || !res[1].length) {
        data.finished = true;
        return true;
      }
      data.list.push(...res[1]);
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
      data.pageNum += 1;
    };
    
    const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const onConfirm = (values) => {
      const [start, end] = values;
      data.show = false;
      data.start =formatDate(start);
      data.end =formatDate(end);
      data.status=4;
      toUpdate(true);
    };
    watch(()=>data.active,newval=>{
      data.status=newval;
       toUpdate(true);
     });
    return {
      ...toRefs(data),
      onLoad,
      formatDate,
      onConfirm,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(),
    };
  },
};
</script>
<style lang="scss" scoped>
.proStatistics {
  // padding: 0 1rem;
  font-size: 1.3rem;
  background: #fff;
  .custom-image{
    width: 12rem;
    margin-top: 10rem;
  }
  .my-sticky {
    color: #fff;
  }
  .abstract {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
  }
  .date{
    padding: 1rem;
  }
  .foods {
    .food {
      display: flex;
      margin-bottom: 1.5rem;
      background: #f2f2f2;
      padding: 1rem;
      margin: 1rem;
      border-radius: 1rem;
      overflow: hidden;
      .img {
        width: 10rem;
        min-width: 10rem;
        border-radius: 1rem;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .info {
        margin-left: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .createtime {
          color: #aaa;
          text-align: left;
          padding-left: 2rem;
        }
        .foodinfos {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .font {
    color: #aaa;
    padding: 0.5rem;
  }
}
</style>